<template>
  <!-- 体征测量 -->
  <section>
    <br>
    <el-form @submit.native.prevent="onSubmit" label-width="100px" ref="form" label-position="top" :model="form" :rules="rules">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="体重：" prop="weight">
            <el-input v-model="form.weight">
              <template slot="append">KG</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身高：" prop="height">
            <el-input v-model="form.height">
              <template slot="append">CM</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="血型：">
            <el-row :gutter="20" type="flex">
              <el-col :span="12">
                <el-form-item label="" prop="bloodTypeOne">
                  <el-select v-model="form.bloodTypeOne" clearable>
                    <el-option v-for="(item,index) in bloodTypeOneArray" :key="index" :value="item.id" :label="item.desc"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="" prop="bloodTypeTwo">
                  <el-select v-model="form.bloodTypeTwo" clearable>
                    <el-option v-for="(item,index) in bloodTypeTwoArray" :key="index" :value="item.id" :label="item.desc"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="体温：">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="" prop="temperatureType">
                  <el-select v-model="form.temperatureType" clearable>
                    <el-option v-for="(item,index) in temperatureTypeArray" :key="index" :value="item.id" :label="item.desc"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="" prop="temperature">
                  <el-input v-model="form.temperature">
                    <template slot="append">℃</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="舒张压：" prop="diastolicpressure">
            <el-input v-model.number="form.diastolicpressure"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收缩压：" prop="systolicPressure">
            <el-input v-model.number="form.systolicPressure"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="血糖类型：" prop="bloodsugarType">
            <el-select v-model="form.bloodsugarType" clearable>
              <el-option v-for="(item,index) in bloodsugarTypeArray" :key="index" :value="item.id" :label="item.desc"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="血糖浓度：" prop="bloodsugar">
            <el-input v-model="form.bloodsugar"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="视力：">
            <el-row :gutter="20" type="flex">
              <el-col :span="12">
                <el-form-item label="" prop="leftEye">
                  <el-input v-model="form.leftEye" placeholder="左眼视力"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="" prop="rightEye">
                  <el-input v-model="form.rightEye" placeholder="右眼视力"> </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="脉搏：" prop="pulse">
            <el-input v-model.number="form.pulse">
              <template slot="append">次/分钟</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="氧饱和度：" prop="oxygenSaturation">
            <el-input v-model="form.oxygenSaturation">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="呼吸：" prop="breathing">
            <el-input v-model.number="form.breathing">
              <template slot="append">次/分钟</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="疼痛评分：" prop="painScore">
            <el-input v-model.number="form.painScore" placeholder="1~10"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">

        </el-col>
      </el-row>
      <el-form-item label="">
        <el-button type="primary" :loading="btnLoading" native-type="submit">提交</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>
<script>
import validForm from "@/_js/validate.js";
export default {
  props: ["patientId"],
  data() {
    return {
      btnLoading: false,
      form: {
        signId: "",
        patientId: "",
        weight: "",
        height: "",
        bmi: "",
        bloodTypeOne: "",
        bloodTypeTwo: "",
        temperatureType: "",
        temperature: "",
        breathing: "",
        systolicPressure: "",
        diastolicpressure: "",
        bloodsugarType: "",
        bloodsugar: "",
        leftEye: "",
        rightEye: "",
        oxygenSaturation: "",
        painScore: "",
        pulse: "",
        status: 1,
        isDeleted: 0
      },
      rules: {
        weight: [{ validator: validForm.integerAndFloat, trigger: "blur" }],
        height: [{ validator: validForm.integerAndFloat, trigger: "blur" }],
        temperature: [
          { validator: validForm.integerAndFloat, trigger: "blur" }
        ],
        systolicPressure: [
          { validator: validForm.integerAndFloat, trigger: "blur" }
        ],
        diastolicpressure: [
          { validator: validForm.integerAndFloat, trigger: "blur" }
        ],
        bloodsugar: [{ validator: validForm.integerAndFloat, trigger: "blur" }],
        leftEye: [{ validator: validForm.integerAndFloat, trigger: "blur" }],
        rightEye: [{ validator: validForm.integerAndFloat, trigger: "blur" }],

        pulse: [{ validator: validForm.integerAndFloat, trigger: "blur" }],
        oxygenSaturation: [
          { validator: validForm.integerAndFloat, trigger: "blur" }
        ],
        breathing: [{ validator: validForm.integerAndFloat, trigger: "blur" }],
        painScore: [{ validator: validForm.integerAndFloat, trigger: "blur" }]
      },
      //血型
      bloodTypeOneArray: [],
      bloodTypeTwoArray: [],
      //体温
      temperatureTypeArray: [],
      //血糖类型
      bloodsugarTypeArray: []
    };
  },
  mounted() {
    let th = this;
    th.form.patientId = th.patientId;
    th.getCommonConfigByKey("血糖类型").then(res => {
      th.bloodsugarTypeArray = res;
    });
    th.getCommonConfigByKey("体温类型").then(res => {
      th.temperatureTypeArray = res;
    });
    th.getCommonConfigByKey("血型").then(res => {
      th.bloodTypeOneArray = res;
    });
    th.getCommonConfigByKey("血型2").then(res => {
      th.bloodTypeTwoArray = res;
    });
    th.getData();
  },
  methods: {
    onSubmit() {
      let th = this;
      let fn = function() {
        th.btnLoading = true;
        th.$api.savePatientSign(th.form).then(res => {
          if (res.executed) {
            th.$message.success("操作成功");
            th.$emit("success");
          } else {
            th.$message.error(res.message);
          }
          th.btnLoading = false;
        });
      };
      th.$refs["form"].validate(v => {
        if (v) {
          fn();
        }
      });
    },
    getData() {
      let th = this;
      let j = {
        patientId: th.form.patientId
      };
      th.$api.getPatientSignById(j).then(res => {
        if (res.executed) {
          th.$utils.joinFormJson(th.form, res.patientSign);
        }
      });
    },
    onReset() {
      const th = this;
      th.$refs["form"].resetFields();
    }
  },
  watch: {
    form: {
      deep: true,
      handler: function(n) {
        const th = this;
        //判断身高体重，得到bmi
        if (n.weight && n.height) {
          let w = Number.parseFloat(n.weight);
          let h = Number.parseFloat(n.height) / 100;
          let a = w / (h * h);
          n.bmi = a.toFixed(1);
        } else {
          n.bmi = "";
        }
      }
    }
  }
};
</script>
